<template>

    <a-card title="计费规则组" :bordered="false">
        <template slot="extra">
            <a-button type="primary" size="small" icon="plus"
                      @click="openEdit">创建组
            </a-button>
        </template>

        <a-list
                :pagination="pagination"
                :data-source="dataSource">


            <a-list-item slot="renderItem" slot-scope="item, index">

                <a-popconfirm slot="actions"
                              title="确定要删除这个规则组吗?"
                              @confirm="removeGroup(item)">
                    <a>删除</a>

                </a-popconfirm>


                <a slot="actions" @click="openEdit(item)">编辑 </a>
                <a slot="actions" @click="toDetails(item)">
                    <div :class=" activeRecord.groupCode===item.code?'text-danger':'' " >规则
                        <a-icon v-if="activeRecord.groupCode===item.code" type="arrow-right"  />
                        <a-icon type="minus"  v-else/>
                    </div>

                </a>


                <a-list-item-meta :title="item.name" :description="item.code">
                </a-list-item-meta>
            </a-list-item>
        </a-list>


        <EditBox v-if="editShow" :editRecord="editRecord" @closeFun="closeEdit"/>
    </a-card>

</template>

<script>

    import {pagination} from "../../public/colums";
    import {FeeGroupDelete, FeeGroupList} from '../../public/http.js';


    export default {
        components: {
            EditBox: () => import('./edit')
        },

        data() {
            return {
                editShow: false,
                editRecord: {},
                dataSource: [],
                activeRecord: {
                    groupCode: null,
                    groupName: null
                },

                pagination: {

                    ...pagination,
                    pageSize: 10,
                    onChange: current => {
                        this.pagination.current = current;
                        this.getTableList();
                    }
                },
            };
        },
        methods: {
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;

            },

            closeEdit(e) {

                this.editShow = false;
                if(e.refresh){this.editRecord=e.activeRecor;}
                if (e.render) {this.getTableList();}
            },
            getTableList() {
                this.loading = true;

                FeeGroupList(this.pagination).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result;//表格数据
                        this.pagination.total = res.data.total; //总记录条数



                        this.onChangeActive();




                    }
                });
            },

            onChangeActive(){

                let newObj={};



                if(!this.editRecord.code) {
                    newObj= this.dataSource[0];
                }else{ newObj=this.editRecord;}

                if ( newObj && newObj.code) {
                    this.activeRecord.groupCode = newObj.code;
                    this.activeRecord.groupName = newObj.name;
                    this.$emit("callBack", this.activeRecord);

                }else{
                    this.$emit("callBack", {});
                }
            },


            removeGroup(obj) {
                FeeGroupDelete(obj.id).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.editRecord={};
                        this.getTableList();

                    }

                })
            }
            ,

            toDetails(record) {
                this.activeRecord.groupCode = record.code;
                this.activeRecord.groupName = record.name;
                this.$emit("callBack", this.activeRecord);
            }
        },

        created() {
            this.getTableList();
        }

    };
</script>


